<!DOCTYPE html>

{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="{% static 'blog/bs/css/bootstrap.css' %}">
    <link rel="shortcut icon" href="{% static 'blog/img/login.ico' %}" type="image/x-icon">
</head>
<style>
    {#.container {#}
    {#    background: url('{% static 'blog/img/garlic.jpg' %}');#}
    {#    width: 1920px;#}
    {#    height: 1080px;#}
    {#    background-size: cover;#}
    {#    opacity: 100%;#}
    {#}#}
</style>
<body>
<div class="container">
    <h3>Welcome to Blog of Caesar Tylor</h3>
    <div class="row">
        <div class="col-md-6 col-lg-offset-3"> {# 占用六个，右倾 #}
            <form>  {# action不再定义，基于Ajax提交 #}
                {% csrf_token %} {# 增加CSRF防护令牌 #}
                <div class="form-group">
                    <label for="user">用户名</label>
                    <input type="text" id="user" class="form-control"> {# ID用于Ajax获取信息 #}
                </div>
                <div class="form-group">
                    <label for="pwd">密码</label>
                    <input type="password" id="pwd" class="form-control">
                </div>
                <div class="form-group">
                    <label for="pwd">验证码</label>
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="valid_code">
                        </div>
                        <div class="col-md-6">
                            <img width="240" height="30" id="valid_code_img" src="/get_validCode_img/" alt="">
                        </div>
                    </div>
                </div>
                <input type="button" class="btn btn-default login_btn" value="submit"><span class="error"></span>
                {# login_btn用于绑定事件 #}
                <a href="/registry/" class="btn btn-success pull-right">注册</a>
            </form>
        </div>
    </div>
</div>
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script>
    // 点击刷新验证码
    $("#valid_code_img").click(function () {
        $(this)[0].src += "?"
    });
    // 登录验证
    $(".login_btn").click(function () {
        $.ajax({
            url: "",
            type: "post",
            data: {
                user: $("#user").val(),
                pwd: $("#pwd").val(),
                valid_code: $("#valid_code").val(),
                csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
            },
            success: function (data) {
                // 将会在控制台打印log信息，据此可以判断获取信息是否全面准确
                {#console.log(data);#}

                if (data.user) {
                    location.href = "/index/";
                    {#window.location="index.html";#}
                }
                // 使得验证码错误的提示信息在一秒钟之后消失
                else {
                    $(".error").text(data.msg).css({"color": "red", "margin-left": "10px"});
                    setTimeout(function () {
                        $(".error").text("")
                    }, 1000)
                }
            }
        })
    })
</script>
</body>
</html>